<template>
  <div class="app-container">
  <div class="filter-container">
      <input placeholder="ID" v-model='id' type="text" name="setId">
       <el-button @click = "Search()" style="width: 100px" class="filter-item" type="primary" >
        Search
        </el-button>
         <el-button v-on:click = Add class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        Add
      </el-button>
    </div>
  
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
    
    <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.courseId }}
        </template>
      </el-table-column>
    
    
      <el-table-column align="center" label="管理员ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id  }}
        </template>
      </el-table-column>
      
      <el-table-column label="Name" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="SerialNumber" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.serial_number }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="Actions1" align="center" width="300" class-name="small-padding fixed-width">
         <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="edit(scope.row.id)">
             Edit
          </el-button>
          </template>

      </el-table-column>

      <el-table-column label="Actions2" align="center" width="300" class-name="small-padding fixed-width">

          <template slot-scope="scope">
          <el-button @click= "shanchu(scope.$index, scope.row)" size="mini" type="danger" >
            Delete
          </el-button>
          </template>

      </el-table-column>
      
    </el-table>
  </div>
</template>


// <script type = "text/javascript">
//  var vm = new Vue({
//     el: '#edit_button',
//     data: {
//        counter: 1
//     }
//  });

//  vm.$watch('edit_button', function(nval, oval) {
//     alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
//  });

// <script type = "text/javascript">
//  var vm1 = new Vue({
//     el: '#delete_button',
//     data: {
//        counter: 1
//     }
//  });

//   vm1.$watch('counter', function(nval, oval) {
//     alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
//  });

//</script>

<script>
import { getList } from '@/api/manager/table'
import { delTableRow, FindById  } from "../../../api/manager/table";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
     return {
      list: null,
    }
  },
  created() {
    this.fetchData()
  },
  handleModifyStatus(row, status) {
      this.$message({
        message: '操作Success',
        type: 'success'
      })
      row.status = status
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleDelete(row, index) {
      this.$notify({
        title: 'Success',
        message: 'Delete Successfully',
        type: 'success',
        duration: 2000
      })
      this.list.splice(index, 1)
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
  methods: {
    fetchData() {
      var vm = this;
        getList().then(res => {
          console.log(res.content)
          vm.list = res.content
        })
      },
       findById(){
         var vm=this;
        var id= this.$router.id;
       axios.get('/findById?=id')
    .then(function (response) {
      console.log(response);
      })
   .catch(function (error) {
    console.log(error);
     });
     vm.param=response
     },
      edit(id) {
      alert('即将进入修改页面')
      this.$router.push("/edit_manager/index/"+id)
    },
    shanchu(idx,row) {
      alert('即将进入删除页面')
      console.log("索引",idx);
          console.log("数据");
      delTableRow(row.courseId).then((res) => {
        console.log(res)
      })
    },
    Search() {
      alert('即将进入查找页面')
      FindById(this.id).then((res) => {
      console.log(res)
      alert('姓名:'+res.name);
      alert('管理员编号:'+res.serial_number)
      })
    },
    Add() {
      alert('即将进入添加页面')
    }
  }
}
</script>